<template>

  <div>

    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <el-form :model="card">
        <el-form-item label="会员卡" :label-width="formLabelWidth">
         {{card.cardName}}
        </el-form-item>

        <el-form-item label="剩余费用/次数" :label-width="formLabelWidth">
          {{card.account}}
      </el-form-item>

        <el-form-item :label="title" :label-width="formLabelWidth">
          <el-input v-model="card.money" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-row type="flex" class="row-bg">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" >
        <router-link :to="'/account/member/'">
          <el-button size="mini" round icon="el-icon-arrow-left"  type="info"  style="margin-left: 400px">返回</el-button>
      </router-link>
      </div></el-col>
      <p></p>
    </el-row>
    <el-container>
      <el-header>会员信息</el-header>
      <el-container>
        <el-aside width="200px">

          <div style="margin-top: 40px">
            <img :src="'http://rj0387v46.hn-bkt.clouddn.com/'+member.img" width="200px" align="center">
            <p align="center">{{member.name}}</p>
            <p align="center" style="color:red;">{{member.levelName}}</p>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <table border="1" cellspacing="0" >
              <tr>
                <th width="200px" align="center" height="40px" >
                  用户ID
                </th>
                <th width="300px" align="center" height="40px" >
                  {{member.id}}
                </th>
                <th width="200px" align="center" height="40px" >
                  注册时间
                </th>
                <th width="300px" align="center" height="40px" >
                  {{member.createTime}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  昵称
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.nickName}}
                </th>
                <th width="200px" align="center" height="40px" >
                  生日
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.birthday}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  性别
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.sex==0">
                  男
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.sex==1">
                  女
                </th>
                <th width="200px" align="center" height="40px" >
                  职业
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.job}}
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  手机
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.tel}}
                </th>
                <th width="200px" align="center" height="40px" >
                  健身经验
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.experience}}年
                </th>
              </tr>
              <tr>
                <th width="200px" align="center" height="40px" >
                  城市
                </th>
                <th width="200px" align="center" height="40px" >
                  {{member.city}}
                </th>
                <th width="200px" align="center" height="40px" >
                  健身目的
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.item==0">
                减脂
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.item==1">
                  增脂
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.item==2">
                  增肌
                </th>
                <th width="200px" align="center" height="40px"  v-if="member.item==3">
                  修身
                </th>
              </tr>
            </table>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>

    <el-container>
    <el-header>会员卡信息</el-header>
    <el-main>
      <el-table :data="cards"  border style="width: 100%">
        <el-table-column prop="cardName" label="会员卡"></el-table-column>
        <el-table-column prop="account" label="余额">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">{{scope.row.account}}次</span>
            <span v-else>{{scope.row.account}}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">次数卡</span>
            <span v-else>储值类型</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAddMoney(scope.row.id,0)" type="text" size="small">续费</el-button>
            <el-button @click="handleAddMoney(scope.row.id,1)" type="text" size="small">扣费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

    <el-container>
      <el-header>收货地址</el-header>
      <el-main>
        <el-table :data="receiver"  border style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="tel" label="电话"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="emailId" label="邮政编码"></el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-container>
      <el-header>订单记录</el-header>
      <el-main>
        <el-table :data="order"  border style="width: 100%">
        <el-table-column prop="orderNum" label="订单编号"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间"></el-table-column>
        <el-table-column prop="tel" label="用户账号"></el-table-column>
        <el-table-column prop="orderTotalMoney" label="订单金额"></el-table-column>
        <el-table-column prop="orderRemarks" label="订单介绍"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus==0">{{scope.row.account}}待付款</span>
            <span v-if="scope.row.orderStatus==1">{{scope.row.account}}已付款</span>
            <span v-if="scope.row.orderStatus==2">{{scope.row.account}}已发货</span>
            <span v-if="scope.row.orderStatus==3">{{scope.row.account}}已核销</span>
            <span v-if="scope.row.orderStatus==4">{{scope.row.account}}已完成</span>
            <span v-if="scope.row.orderStatus==5">{{scope.row.account}}已取消</span>
          </template>
        </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看订单</el-button>
            </template>
          </el-table-column>
      </el-table></el-main>
    </el-container>
  </div>
</template>

<script>
import member from "../../../api/member";
import memberCard from "../../../api/memberCard";

export default {
  name: "detail",
  data(){
    return{
      formLabelWidth: '120px',
      member:{},  //会员信息
      cards:[],    //会员卡信息
      receiver:[],   //收货地址
      order:[],     //订单信息
      card:{
        money: 0
      },      //修改的会员卡信息
      dialogTableVisible: false,
      title: ""
    }
  },
  methods:{
    getList(){
      member.getById(this.$route.params.id).then(res=>{
        this.member=res.data;
        console.log(res.data)
      })
      member.getCardById(this.$route.params.id).then(res=>{
        this.cards=res.data;

      })
      member.getReceiverById(this.$route.params.id).then(res=>{
        this.receiver=res.data;
      })
      member.getOrderById(this.$route.params.id).then(res=>{
        this.order=res.data;
      })
    },
    handleAddMoney(id,row){

      if(row==0){
        this.title="续费"
      }else{
        this.title="扣费"
      }
      memberCard.getById(id).then(res=>{
        this.dialogTableVisible=true;
        this.card=res.data;
        this.card.money=0;
      })
    },
    onSubmit(){
      if(this.title=="扣费"){
        this.card.money=0-this.card.money
      }
      memberCard.modifyMoney(this.card.id,this.card.money).then(res=>{
        this.dialogTableVisible=false;
        this.getList();
        if(res.data.flag){
          this.$message.success(res.data.flag);

        }else{
          this.$message.warning(res.data.flag)
        }

      })
    },
    handleClick(id){
      this.$router.push('/order/edit/'+id)
    }
  },

  mounted() {
    this.getList();
}
}
</script>

<style scoped>

</style>
